<template>
  <PageWrapper dense contentFullHeight contentClass="flex">
    <div class="w-18/24">
      <BasicTable
        class="p-0"
        @register="registerTable"
        @row-click="handleRowClick"
        @fetch-success="handleFetchSuccess"
        :rowSelection="{ type: 'radio', onChange: onRowSelectChange }"
      >
        <template #headerTop> </template>
        <template #toolbar>
          <a-button type="primary" @click="handleBatchDelete">
            <PlusCircleOutlined />
            创建登记
          </a-button>
        </template>
        <template #bodyCell="{ column }">
          <template v-if="column.key === 'renqunfenlei'">
            <a-space>
              <a-tag color="red" class="rounded-full"> 老 </a-tag>
              <a-tag color="cyan" class="rounded-full"> 糖 </a-tag>
            </a-space>
          </template>
          <template v-if="column.key === 'action'">
            <TableAction
              :actions="[
                {
                  label: '编辑',
                  icon: 'ant-design:edit-filled',
                },
              ]"
              :dropDownActions="[
                {
                  label: '删除',
                },
                {
                  label: '锁定',
                },
              ]"
            />
          </template>
        </template>
      </BasicTable>
    </div>
    <div class="w-6/24">
      <div class="h-full p-r-4 p-t-4 p-b-4">
        <div class="bg-white p-4 h-full">
          <div>
            <div class="w-16/24">
              <a-space :size="26">
                <div class="flex-row text-center">
                  <a-avatar
                    :size="86"
                    shape="square"
                    :style="{
                      backgroundColor: '#fff',
                      color: '#999',
                      border: '1px  dashed #999',
                    }"
                    v-show="false"
                  >
                    <template #icon><UserOutlined /></template>
                  </a-avatar>
                  <a-image
                    :width="86"
                    class="rounded-2"
                    :src="`https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png`"
                  />
                  <div class="p-2 space-x-1">
                    <UserOutlined />
                    <span>证件照</span>
                  </div>
                </div>
                <div class="flex-row text-center">
                  <a-avatar
                    :size="86"
                    shape="square"
                    :style="{
                      backgroundColor: '#fff',
                      color: '#999',
                      border: '1px  dashed #999',
                    }"
                  >
                    <template #icon><ContactsOutlined /></template>
                  </a-avatar>
                  <div class="p-2 space-x-1">
                    <ContactsOutlined />
                    <span>现场照</span>
                  </div>
                </div>
              </a-space>
            </div>
          </div>
          <a-divider />
          <a-list size="small" class="w-full" :split="false">
            <a-list-item>
              <strong class="text-base">
                <WomanOutlined
                  class="t-16 text-red"
                  v-show="choosePhyiscalEntity.gender === '女'"
                />
                <ManOutlined class="t-16 text-blue" v-show="choosePhyiscalEntity.gender === '男'" />
                {{ choosePhyiscalEntity.name }}
              </strong>
              <a-tag color="blue" v-show="choosePhyiscalEntity.age">
                {{ choosePhyiscalEntity.age }}岁
              </a-tag>
            </a-list-item>
            <a-list-item>
              <label class="w-10/24"><IdcardOutlined class="m-r-1" />证件号 </label>
              <EllipsisText :maxWidth="160">{{ choosePhyiscalEntity.idCard }}</EllipsisText>
            </a-list-item>
            <a-list-item>
              <label class="w-10/24"><PhoneOutlined class="m-r-1" />联系电话</label>
              <span>{{ choosePhyiscalEntity.phone }}</span>
            </a-list-item>
            <a-list-item>
              <label class="w-10/24"><AppstoreOutlined class="m-r-1" />套餐名称</label>
              <span>老年人套餐</span>
            </a-list-item>
            <a-list-item>
              <label class="w-10/24"><CalendarOutlined class="m-r-1" />登记人员</label>
              <span>{{ choosePhyiscalEntity.buserName }}</span>
            </a-list-item>
            <a-list-item>
              <label class="w-10/24"><CalendarOutlined class="m-r-1" />登记时间</label>
              <span>{{ dateUtil(choosePhyiscalEntity.createTime).format('YYYY-MM-DD') }}</span>
            </a-list-item>
          </a-list>
          <a-divider />
        </div>
      </div>
    </div>
  </PageWrapper>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';

  import { BasicTable, useTable, TableAction } from '@/components/Table';
  import { EllipsisText } from '@/components/EllipsisText';
  import { PageWrapper } from '@/components/Page';
  import { useMessage } from '@/hooks/web/useMessage';
  import { getBasicColumns, getFormConfig } from './column';
  import { batchDeletePhysical, getPhysicalList } from '@/api/peis/peis';
  import { message } from 'ant-design-vue';
  import { dateUtil } from '@/utils/dateUtil';
  import {
    UserOutlined,
    PlusCircleOutlined,
    ContactsOutlined,
    WomanOutlined,
    ManOutlined,
    IdcardOutlined,
    PhoneOutlined,
    AppstoreOutlined,
    CalendarOutlined,
  } from '@ant-design/icons-vue';

  const choosePhyiscalEntity = ref<any>({});
  const checkedKeys = ref<Array<string | number>>([]);
  const [registerTable, { reload }] = useTable({
    title: '体检记录',
    api: getPhysicalList,
    columns: getBasicColumns(),
    useSearchForm: true,
    formConfig: getFormConfig(),
    showTableSetting: true,
    tableSetting: { fullScreen: true },
    showIndexColumn: false,
    rowKey: 'id',
    clickToRowSelect: true,
    actionColumn: {
      width: 160,
      title: '编辑',
      dataIndex: 'action',
    },
  });
  // 选中事件
  function onRowSelectChange(selectedRowKeys: (string | number)[], detail) {
    checkedKeys.value = selectedRowKeys;
    choosePhyiscalEntity.value = detail[0];
  }
  // 单行选中事件
  function handleRowClick(record) {
    choosePhyiscalEntity.value = record;
  }
  // 接口请求后事件
  function handleFetchSuccess({ items }) {
    choosePhyiscalEntity.value = items[0];
  }
  // 批量删除
  function handleBatchDelete() {
    if (!checkedKeys.value.length) {
      message.error('请至少选择一条数据删除');
      return false;
    }
    useMessage().createConfirm({
      iconType: 'info',
      title: '提示',
      content: '此操作将永久删除该数据, 是否继续？',
      onOk: () => {
        batchDeletePhysical(checkedKeys.value).then((res) => {
          if (res.code === 0) {
            message.success('操作成功');
            reload();
          } else {
            message.error(res.msg);
          }
        });
      },
    });
  }
</script>
